<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>.::SAEL::. Seguimiento de Aprendices</title>
                <link rel="shortcut icon" href="favicon.ico"/>
            </f:facet>
        </h:head>
        <h:body>
            <h:graphicImage url="images/banner_sael.jpg" width="100%" height="100%" alt="LogoAspera"  style="vertical-align: top;"/> 
            <p:panel>
                <p:panelGrid> 
                    <p:row>
                        <p:column style="vertical-align: top;"> 
                            <h:form>
                                <p:menu>
                                    <p:submenu label="Menú">                                
                                <p:menuitem value="Inicio" url="indexInstructor.xhtml" />
                                <p:menuitem value="Alistar Seguimiento" url="gestionSeguimientosIns.xhtml" />
                                <p:menuitem value="Ejecutar Seguimiento" url="ejecutarSeguimientosIns.xhtml" />
                                <p:menuitem value="Aprendices" url="gestionAprendicesIns.xhtml" />
                                <p:menuitem value="Instructores" url="gestionInstructoresIns.xhtml" />
                                <p:menuitem value="Reportes" url="reportesSaelIns.xhtml" />
                                <p:menuitem value="Cambio Contraseña" url="CambiaPasswordInst.xhtml" />
                                <p:menuitem value="Cerrar Sesión" actionListener="#{usuariosSaelVista.cerrarSesion_action}" />
                            </p:submenu>                       
                                </p:menu>
                            </h:form>


                            <!-- dialogo de ayuda -->
                            <p:dialog id="modalDialog" header="Ayuda" widgetVar="helpDialog" showEffect="fade" hideEffect="bounce" modal="true" dynamic="true">  
                                <p align="justify">                       
                                    En esta página usted podrá:<br/><br/>
                                    <b>-Crear, Modificar, Eliminar y Consultar Instructores:</b> ésta opción solo está disponible para usuarios de tipo Coordinador. 
                                    Para crear un instructor basta con digitar su documento de identificación y luego presionar la tecla TAB(Tabulación) o Enter. 
                                    ASPERA verificará que no exista un instructor con ese mismo documento. Si existe cargará sus datos y sino usted deberá continuar
                                    llenando el formulario. Luego de clic en el botón Crear. Para modificar o eliminar un instructor existente seleccionelo 
                                    de la tabla inferior.
                                    <br/><br/>
                                    <b>-Cargue Masivo de Instructores:</b> para crear varios instructores masivamente desde un archivo de Excel de clic en el botón Selecccionar. 
                                    Luego busque el archivo el cual deberá tener extensión <strong>.XLS</strong>. ASPERA leerá el archivo y luego mostrará el resultado del cargue masivo. 
                                    También indicará en que filas del archivo hay errores. Para ver un ejemplo de la estructura que debe tener el archivo de clic en el enlace Ver Ejemplo. 
                                    <br/><br/>
                                    <u>Nota:</u> la clave de acceso no se podrá modificar en ésta página por razones de seguridad sino en la opción <u>Cambio 
                                        Contraseña</u> del menú principal. El coordinador, al momento de crear el instructor, asignará una clave de acceso temporal.
                                    Se le recomienda al instructor que luego de ingresar por primera vez a ASPERA realice el cambio de contraseña por razones de
                                    seguridad
                                    <br/><br/>                  

                                    <b>-Consultar y Filtrar Instructores:</b> en la tabla de resultados se pueden visualizar todos los instructores existentes. 
                                    Si desea filtrar los resultados basta con digitar en la columna Identificación un número especifico, de igual forma se puede utilizar 
                                    el filtro por Nombre.                      
                                </p>
                            </p:dialog>
                            <!-- dialogo de ejemplo cargue -->
                            <p:dialog id="modalDialogEjemplo" header="Ejemplo Archivo de Cargue" widgetVar="cargueDialog" showEffect="fade" hideEffect="bounce" modal="true" dynamic="true">  
                                <p align="justify">                       
                                    El archivo de Excel para cargar masivamente los instructores debe tener la extesión .XLS y debe tener la siguiente estructura:<br/><br/>
                                    <div align="center" >
                                        <h:graphicImage url="/aspera/images/ejemploCargueInstructores.JPG" alt="Cargue Instructores"/>
                                    </div>                    
                                    <br/>                    
                                </p>
                            </p:dialog>
                        </p:column>
                        <p:column>
                            <h:form id="formulario"> 
                                <p:panel id="panel">
                                    <p:growl id="growl" showDetail="true" sticky="true" /> 
                                    <p:messages id="mensajes" showDetail="true" />
                                    <p:panel id="panelInstructores" header="Instructores"> 
                                        <f:facet name="actions">
                                            <p:commandLink onclick="PF('helpDialog').show();" styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"><h:outputText styleClass="ui-icon ui-icon-help" /></p:commandLink>
                                        </f:facet>
                                        <p:panelGrid>
                                            <p:row>
                                                <p:column>
                                                    <h:outputText value="Documento:"/> 
                                                </p:column>

                                                <p:column>
                                                    <div align="left">
                                                        <p:inputText id="txtDocumento" binding="#{instructorVista.txtIdentificacion}" size="30" >
                                                            <!-- ajax para el listener del campo -->
                                                            <p:ajax listener="#{instructorVista.txtIdentificacion_listener}" update="panelInstructores" />
                                                        </p:inputText>
                                                    </div> 
                                                    <p:tooltip for="txtDocumento" value="Digite el Documento y Presione TAB" showEffect="slide" hideEffect="slide" />
                                                </p:column>

                                                <p:column>
                                                    <h:outputText value="Nombre:"/>
                                                </p:column>

                                                <p:column>
                                                    <div align="left">
                                                        <p:inputText id="txtNombre" binding="#{instructorVista.txtNombre}" size="30"/>
                                                    </div>                                      
                                                </p:column>

                                            </p:row>  
                                            <p:row>
                                                <p:column>
                                                    <h:outputText value="Apellido:"/>
                                                </p:column>

                                                <p:column>
                                                    <div align="left">
                                                        <p:inputText id="txtApellido" binding="#{instructorVista.txtApellido}" size="30"/>
                                                    </div>                                      
                                                </p:column>

                                                <p:column>
                                                    <h:outputText value="Correo:"/>
                                                </p:column>

                                                <p:column>
                                                    <div align="left">
                                                        <p:inputText id="txtCorreo" binding="#{instructorVista.txtCorreo}" size="30"/>
                                                    </div>                                      
                                                </p:column>                                        

                                            </p:row>
                                            <p:row>
                                                <p:column>
                                                    <h:outputText value="Teléfono:"/>
                                                </p:column>

                                                <p:column>
                                                    <div align="left">
                                                        <p:inputText id="txttelefono" binding="#{instructorVista.txtTelefono}" size="30"/>
                                                    </div>                                      
                                                </p:column>

                                                <p:column>
                                                    <h:outputText value="Clave:"/>
                                                </p:column>

                                                <p:column>
                                                    <div align="left">
                                                        <p:password id="passClave" binding="#{instructorVista.txtClave}" feedback="true" size="30" />
                                                    </div>                                      
                                                </p:column>                                        

                                            </p:row>
                                            <p:row>
                                                <p:column>
                                                    <h:outputText value="Tipo:"/>
                                                </p:column>

                                                <p:column colspan="3">
                                                    <div align="left">
                                                        <p:selectOneMenu id="cmbTipo" binding="#{instructorVista.cmbTipoInstructor}" >
                                                            <f:selectItem itemLabel="CONTRATISTA" itemValue="CONTRATISTA" />
                                                            <f:selectItem itemLabel="PLANTA" itemValue="PLANTA" />
                                                        </p:selectOneMenu>
                                                    </div>                                      
                                                </p:column>                                     

                                            </p:row> 

                                            <p:row>
                                                <p:column colspan="4">
                                                    <div align="center">
                                                        <p:commandButton id="btnCrear" value="Crear" binding="#{instructorVista.btnRegistrar}" action="#{instructorVista.registrar_action}" update=":formulario:mensajes,:formulario:panelInstructores,:formulario:listaInstructores" />
                                                        <p:commandButton id="btnModificar" disabled="true" value="Modificar" binding="#{instructorVista.btnModificar}" action="#{instructorVista.modificar_action}" update=":formulario:mensajes,:formulario:panelInstructores,:formulario:listaInstructores" />
                                                        <p:commandButton id="btnEliminar" disabled="true" value="Eliminar" binding="#{instructorVista.btnEliminar}" action="#{instructorVista.borrar_action}" onclick="PF('confirmation').show();" type="button" />
                                                        <p:commandButton id="btnLimpiar" value="Limpiar" binding="#{instructorVista.btnLimpiar}" action="#{instructorVista.limpiar_action}" update=":formulario:panelInstructores,:formulario:listaInstructores" />
                                                    </div>
                                                </p:column>                                     

                                            </p:row> 

                                        </p:panelGrid>

                                    </p:panel>      
                                    <p:panel id="panelUpload" header="Cargue Masivo de Instructores">
                                        <p:commandLink id="linkEjemplo" update="panelUpload" onclick="PF('cargueDialog').show();" style="cursor: help;" >  
                                            <h:outputText value="Ver Ejemplo" style="color: #168216; font-weight: bold;"/> 
                                        </p:commandLink>
                                        <p:fileUpload label="Seleccionar" invalidFileMessage="El Archivo deber ser de Extensión .XLS" fileUploadListener="#{instructorVista.handleFileUpload}" mode="advanced"  update="mensajeArchivo" auto="true" allowTypes="/(\.|\/)(xls)$/"/> 
                                        <p:messages id="mensajeArchivo" showDetail="true" /> 
                                    </p:panel>
                                    <br />
                                    <h:outputText value="Si Desea Buscar un Instructor Específico digite el Dato en el Filtro Respectivo" />
                                    <br /><br />
                                    <p:dataTable id="listaInstructores" var="instructores" filteredValue="#{instructorVista.listaInstructores}" value="#{instructorVista.listaInstructores}" selection="#{instructorVista.selectedInstructor}"
                                                 selectionMode="single" rowKey="#{instructores.documento.documento}" paginator="true" rows="5" emptyMessage="No existe el Instructor!" 
                                                 >
                                        <p:ajax event="rowSelect" listener="#{instructorVista.onRowSelect}"   
                                                update=":formulario:panelInstructores" /> 
                                        <p:column sortBy="#{instructores.documento.documento}" filterBy="#{instructores.documento.documento}" filterMatchMode="contains">
                                            <f:facet name="header">
                                                <h:outputText  value="Identificación" />                            
                                            </f:facet>
                                            <h:outputText  value="#{instructores.documento.documento}" />                          
                                        </p:column>

                                        <p:column sortBy="#{instructores.tipo}">
                                            <f:facet name="header">
                                                <h:outputText  value="Tipo Instructor" />                            
                                            </f:facet>
                                            <h:outputText  value="#{instructores.tipo}" />                          
                                        </p:column>

                                        <p:column sortBy="#{instructores.documento.nombre}" filterBy="#{instructores.documento.nombre}" filterMatchMode="contains">
                                            <f:facet name="header" >
                                                <h:outputText  value="Nombre" />                            
                                            </f:facet>
                                            <h:outputText  value="#{instructores.documento.nombre}" />                          
                                        </p:column>
                                    </p:dataTable>                    

                                    <!--Panel Exportar -->
                                    <p:panel header="Exportar">   
                                        <h:commandLink>
                                            <!--PDF-->
                                            <h:outputText value="PDF" />
                                            <p:dataExporter type="pdf" fileName="ListadoInstructores" target="listaInstructores"/>
                                        </h:commandLink>

                                        <h:outputText value=" | " />

                                        <h:commandLink>
                                            <!--EXCEL-->
                                            <h:outputText value="XLS" />
                                            <p:dataExporter type="xls" fileName="ListadoInstructores" target="listaInstructores"/>
                                        </h:commandLink>
                                    </p:panel>
                                </p:panel>
                            </h:form>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:panel>
            <div align="center">
                <h:graphicImage url="images/pie_sael.jpg" width="100%" height="100%" alt="LogoSAEL"  style="vertical-align: bottom;"/>
            </div>
            <!-- Dialogo de confirmacion para el boton eliminar -->
            <h:form id="formDialog" > 
                <p:confirmDialog id="confirmDialog" message="Está Seguro de Eliminar el Instructor?"  
                                 header="Confirmación" severity="alert" widgetVar="confirmation">  
                    <p:commandButton id="confirm" value="Si" oncomplete="confirmation.hide()" update=":formulario:mensajes,:formulario:panelInstructores,:formulario:listaInstructores"  
                                     actionListener="#{instructorVista.onEliminacionConfirm}" />  
                    <p:commandButton id="decline" value="No" onclick="PF('confirmation').hide()" type="button" />   

                </p:confirmDialog> 
            </h:form>
        </h:body>

    </f:view>
</html>
